<template>
  <div class="app-container">
    <page-header
      title="频道设置"
      desc="店铺商品限时折扣促销活动设置及管理"
      show-back
    />

    <div class="buttons">
      <!--Filter-->
      <filter-data
        :config="filterConfig"
        :filter-data="listQuery"
        @filter="filterSearch"
      />
      <el-button
        :disabled="!canSubmit"
        size="small"
        @click="onSubmit"
      >提交保存</el-button>
    </div>
    <div class="crud">
      <el-table
        ref="goodsTable"
        v-loading="listLoading"
        :data="goodsList"
        style="width: 100%"
        row-key="id"
        class="custom-goods-table"
        size="small"
        highlight-current-row
        @current-change="handleCurrentChange"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" />
        <el-table-column
          label="SPU ID"
          prop="product_id"
          width="80"
        />
        <el-table-column
          label="SKU ID"
          prop="id"
          width="80"
        />
        <el-table-column
          label="商品"
          width="300"
        >
          <template slot-scope="scope">
            <em-cell
              :icon="scope.row.thumb"
              :title="scope.row.title"
              :label="scope.row.name"
              type="goods"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          align="right"
        />
        <el-table-column
          prop="stock"
          label="库存"
          align="right"
        />
        <el-table-column
          prop="stock"
          label="库存"
          align="right"
        />
      </el-table>
      <pagination
        v-show="meta.totalCount>0"
        :total="meta.totalCount"
        :limit="meta.perPage"
        :page-count="5"
        :background="false"
        :small="true"
        layout="total, prev, pager, next, jumper"
        :page.sync="listQuery.page"
        @currentPage="meta.currentPage"
        @pageSize="meta.perPage"
        @pagination="getData"
      />
    </div>
  </div>
</template>

<script>
import PageHeader from '@/components/PageHeader'
import FilterData from './filter.vue'
import Pagination from '@/components/Pagination'
export default {
  components: {
    PageHeader,
    FilterData,
    Pagination
  },
  inject: ['goBack'],
  data() {
    return {
      multipleSelection: [],
      // 表格配置
      filterConfig: [
        {
          label: '商品名称/货号/关键字',
          prop: 'keyword',
          type: 'text'
        }
      ],
      // 展示的表格数据，数据来源可能是父组件传递的固定数据，可能是接口请求数据
      goodsList: [],
      meta: {
        // 列表数据总数
        totalCount: 0,
        pageCount: 1,
        // 当前页码
        currentPage: 1,
        // 每页显示数量
        perPage: 20
      },
      listQuery: {
        page: 1
      },
      //  表格加载状态
      listLoading: false
    }
  },
  computed: {
    channelId() {
      return this.$route.params.id
    },
    canSubmit() {
      return this.multipleSelection.length > 0
    }
  },
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    getData(params = null) {
      this.listLoading = true
      const queryParams = Object.assign({ channel_id: this.channelId }, this.listQuery, params)
      console.log('queryParams:', queryParams)
      this.$http.channel.sourceGoods(queryParams).then(
        response => {
          const { data } = response
          this.goodsList = data.items
          this.meta = data.meta
          this.listLoading = false
        },
        error => {
          console.log(error)
          this.listLoading = false
        }
      )
    },
    onSubmit() {
      console.log(this.results)
      this.$http.channel
        .createSource({
          items: this.multipleSelection.map(item => item.id),
          channel_id: this.channelId
        })
        .then(res => {
          console.log(res)
          this.goBack()
        })
    },
    // Filter数据检索提交
    filterSearch(data) {
      this.listQuery.page = 1
      this.getData(data)
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.goodsTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.goodsTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleCurrentChange(row) {
      this.$refs.goodsTable.toggleRowSelection(row)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/components/Gridview/components/grid.scss';
.buttons {
  display: flex;
  align-items: center;
  * ~ * {
    margin-left: 10px;
  }
}
</style>
<style lang="scss" >
</style>

